<template>
  <div>
    <ZgDialog
      :width="view.width"
      :top="view.top"
      :title="view.title"
      v-model="visible"
      ref="dialog"
      @ok="save">
      <a-form :form="form" :model="paramData" :label-col="labelCol" :wrapper-col="wrapperCol">

        <a-form-item :label="item.label" v-for="(item, index) in formItemData" :key="index">
          <a-input
            v-decorator="[
              item.name,
              {
                rules:item.rules
              },
            ]"
            v-model="paramData[item.name]" />
        </a-form-item>

      </a-form>
      <div class="mb10 flx-e">
        <ZgButton type="primary" @click="handleAdd" >添加数据</ZgButton>
      </div>

      <a-table
        size="small"
        bordered
        :customHeaderRow="()=>{return { style: { background: '#f2f2f2' } }}"
        :pagination="false"
        :data-source="stepSubVos"
      >

        <a-table-column
          key="stepName"
          width="300"
          title="节点名称">
          <template slot-scope="record">
            <a-select default-value="lucy" v-model="record.stepNo" style="width: 120px" @change="handleChange(record)">
              <a-select-option :value="v.stepNo" v-for="(v,i) in list" :key="i">
                {{ v.stepName }}
              </a-select-option>

            </a-select>
          </template>
        </a-table-column>
        <a-table-column
          key="stepNo"
          width="300"
          title="节点编号">
          <template slot-scope="record">
            {{ record.stepNo }}
          </template>
        </a-table-column>
        <a-table-column
          key="nextStepId"
          width="300"
          title="下个环节">
          <template slot-scope="text, record">
            <ZgInput v-model="record.nextStepId" />
          </template>
        </a-table-column>
        <a-table-column
          key="personList"
          width="300"
          title="环节处理人">
          <template slot-scope="text, record">
            <a-select
              mode="multiple"
              placeholder="请选择处理人"
              style="width: 200px"
              :maxTagCount="2"
              maxTagPlaceholder="..."
              :default-value="record.personList"
              @change="value => personListChange(value,record)"
              @popupScroll="popupScroll"
            >
              <a-select-option v-for="item in processPerson" :key="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </template>
        </a-table-column>
        <a-table-column fixed="right" title="操作">
          <template slot-scope="text,record">

            <div class="flx-s">
              <a-button
                class="mr10"
                type="link"
                @click="toDel(record)"
              >
                <i :class="`fa fa-trash mr5`"/>删除
              </a-button>
            </div>
          </template>
        </a-table-column>

      </a-table>
    </ZgDialog>
  </div>
</template>
<script>

export default {

  data () {
    return {
      form: this.$form.createForm(this, { name: 'processForm' }),
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      list: [],
      processPerson: [
        { name: '1407994149180936192', value: '张晓波' },
        { name: '1864926877955383297', value: '张晓波' }
      ],
      paramData: {
        name: '',
        field: '',
        fieldValue: '',
        field2: '',
        field2Value: '',
        flowCode: ''
      },
      stepSubVos: [

      ],
      formItemData: [
        {
          name: 'name',
          label: '流程名称',
          rules: [
            { required: true, message: '请输入流程名称', trigger: 'blur' }
          ],
          type: 'input',
          placeholder: '请输入流程名称'
        },
        {
          name: 'field',
          label: '条件一',
          rules: [
            { required: true, message: '请输入条件一', trigger: 'blur' }
          ],
          type: 'input',
          placeholder: '请输入条件一'
        },
        {
          name: 'fieldValue',
          label: '条件一值',
          rules: [
            { required: true, message: '请输入条件一的值', trigger: 'blur' }
          ],
          type: 'input',
          placeholder: '请输入条件一的值'
        },
        {
          name: 'field2',
          label: '条件二',
          rules: [
            { required: true, message: '请输入条件二', trigger: 'blur' }
          ],
          type: 'input',
          placeholder: '请输入条件二'
        },
        {
          name: 'field2Value',
          label: '条件二的值',
          rules: [
            { required: true, message: '请输入条件二的值', trigger: 'blur' }
          ],
          type: 'input',
          placeholder: '请输入条件二的值'
        }
      ],
      view: { width: '60%', top: '5%', title: '添加子流程' },
      visible: false

    }
  },
  methods: {
    handleAdd () {
      const len = this.stepSubVos.length + 1

      const newData = {
        key: len,
        stepName: '',
        stepNo: '',
        nextStepId: '',
        personList: []
      }
      this.stepSubVos = [...this.stepSubVos, newData]
    },
    toDel (record) {
      const stepSubVos = [...this.stepSubVos]
      this.stepSubVos = stepSubVos.filter(item => item.key !== record.key)
    },
    personListChange (value, record) {
      record.personList = value
    },
    popupScroll () {
      console.log('popupScroll')
    },
    handleChange (record) {
      const stepNo = record.stepNo
      record.stepName = this.list.filter(item => item.stepNo === stepNo)[0].stepName
    },
    save () {
      this.form.validateFields((error, values) => {
        if (!error) {
          const param = {
            ...this.paramData,
            ...values,
            stepSubVos: this.stepSubVos
          }
          this.$http.post('/zg-autoflow/autoFlow/sub/addOrUpdate', param, data => {
            this.paramData = {}
            this.stepSubVos = []
            this.$message.success('添加成功')
            this.$emit('ok')
            this.visible = false
          })
        }
      })
    },
    open (list, flowCode) {
      this.list = list
      this.paramData.flowCode = flowCode
      this.$refs.dialog.open()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
